import 'package:book_app/feature/loginregister/register_view.dart';
import 'package:book_app/feature/loginregister/service/forget_service.dart';
import 'package:book_app/feature/loginregister/viewmodel/forget_view_model.dart';
import 'package:book_app/product/base/base_view.dart';
import 'package:book_app/product/extensions/context_extension.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:book_app/product/constants/app_colors.dart';
import 'package:timer_button/timer_button.dart';

import '../comon/web_view.dart';

class ForgetView extends StatefulWidget {
  const ForgetView({super.key});

  @override
  State<ForgetView> createState() => _ForgetViewState();
}

class _ForgetViewState extends State<ForgetView> {

  final FocusNode _focusNode = FocusNode();

  bool codeInput = false;
  void _changeCodeInputLine() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      codeInput = !codeInput;
    });
  }
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _focusNode.addListener(() {
      if (_focusNode.hasFocus) {
        print('验证码得到焦点');
        _changeCodeInputLine();
      }else{
        print('验证码失去焦点');
        _changeCodeInputLine();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return BaseView<ForgetViewModel>(
      viewModel: ForgetViewModel(),
      onPageBuilder: (BuildContext context, ForgetViewModel viewModel) =>
          Scaffold(
            extendBodyBehindAppBar: true,
            appBar: buildAppbar(),
            body: Container(
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/images/appbackground.png'),
                  // 替换为你的背景图片路径
                  fit: BoxFit.cover,
                ),
              ),
              child: SafeArea(
                child: ListView(
                  physics: const NeverScrollableScrollPhysics(),
                  children: [
                    const SizedBox(
                      height: 50,
                    ),
                    const Padding(
                      padding: EdgeInsets.only(top: 30, left: 34, right: 34),
                      child: Text(
                        '忘记密码',
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.white,
                            fontSize: 27),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 10, left: 34, right: 34),
                      child: TextField(
                        style: const TextStyle(fontSize: 17, color: Colors.white),
                        decoration: InputDecoration(
                          hintText: '请输入邮箱',
                          hintStyle:
                          TextStyle(color: AppColors.text204, fontSize: 16),
                          enabledBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: AppColors.white33)),
                          focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: AppColors.orange)),
                        ),
                        cursorColor: AppColors.orange,
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 30, left: 34, right: 34),
                      child: Container(
                        padding: const EdgeInsets.only(right: 0.0),
                        decoration: BoxDecoration(
                          border: Border(
                            bottom: BorderSide(
                              color:
                              codeInput ? AppColors.orange : AppColors.white33,
                              width: 1.0,
                            ),
                          ),
                        ),
                        child: Row(
                          children: [
                            // 地区号图标
                            Expanded(
                              child: TextField(
                                style: const TextStyle(
                                    fontSize: 17, color: Colors.white),
                                decoration: InputDecoration(
                                  hintText: '请输入验证码',
                                  hintStyle: TextStyle(
                                      color: AppColors.text204, fontSize: 16),
                                  enabledBorder: InputBorder.none,
                                  focusedBorder: InputBorder.none,
                                ),
                                focusNode: _focusNode,
                              ),
                            ),
                            TimerButton(
                              label: "获取验证码",
                              timeOutInSeconds: 60,
                              timeUpFlag: true,
                              onPressed: () {},
                            ),
                          ],
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 10, left: 34, right: 34),
                      child: TextField(
                        style: const TextStyle(fontSize: 17, color: Colors.white),
                        decoration: InputDecoration(
                          hintText: '请输入密码',
                          hintStyle:
                          TextStyle(color: AppColors.text204, fontSize: 16),
                          enabledBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: AppColors.white33)),
                          focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: AppColors.orange)),
                        ),
                        cursorColor: AppColors.orange,
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 30, left: 34, right: 34),
                      child: RichText(
                        text: TextSpan(children: [
                          TextSpan(
                            text: '我已阅读并同意',
                            style: TextStyle(color: AppColors.white),
                          ),
                          TextSpan(
                            text: '用户协议',
                            style: TextStyle(color: AppColors.orange),
                            recognizer: TapGestureRecognizer()
                              ..onTap = () {
                                _launchURL();
                              },
                          ),
                          TextSpan(
                            text: '和',
                            style: TextStyle(color: AppColors.white),
                          ),
                          TextSpan(
                            text: '隐私政策',
                            style: TextStyle(color: AppColors.orange),
                            recognizer: TapGestureRecognizer()
                              ..onTap = () {
                                _launchURL();
                              },
                          ),
                        ]),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 30, left: 34, right: 34),
                      child: SizedBox(
                        height: 45,
                        child: ElevatedButton(
                          onPressed: () {},
                          style: ElevatedButton.styleFrom(
                            backgroundColor: AppColors.orange,
                            foregroundColor: Colors.white,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10),
                            ),
                            //change text color of button
                          ),
                          child: const Text(
                            '同意并注册',
                            style: TextStyle(
                                fontWeight: FontWeight.bold, fontSize: 16),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
      onModelReady: (model) {
        model.setContext(context);
      },
    );
  }

  _launchURL() async {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => const ACWebView(
          url: 'https://cloudtest.actec.com.cn/public/chargers_user_agreement.html',
          title: '用户协议',
        ),
      ),
    );
  }

  AppBar buildAppbar() {
    return AppBar(
      backgroundColor: AppColors.transparent,
      elevation: 0,
      actions: [
        // TextButton(
        //     onPressed: () {
        //       // 左边按钮的操作
        //     },
        //     child: const Text(
        //       '邮箱注册',
        //       style: TextStyle(color: Colors.white),
        //     ))
      ],
      centerTitle: true,
    );
  }
}